﻿<%@ Page Language="C#" MasterPageFile="~/default.master" AutoEventWireup="true" CodeBehind="StepForm.aspx.cs" Inherits="Chinook.Web.StepForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="BodyContentPlaceholder" runat="Server">

<ul class="menu noaccordion" id="menu3">
		<li style="position: static;">
			<a href="#">Weblog Tools</a>
			<ul style="display: block;">
				 <table>       
         <tr>
             <td class="vm-right-align">
                 <label for="txtTitle"><%=Resources.Chinook.Form.Labels.lblTitle%></label>
             </td>
             <td>
                 <input title="Tool tip content" class="text txtSalute"  id="txtTitle"  type="text"  tabindex="1" />
             </td>
         </tr>
         <tr>
             <td class="vm-right-align">
                 <label for="txtFirstName"><%=Resources.Chinook.Form.Labels.lblFirstName%></label>
             </td>
             <td>
                 <input type="text" class="text txtName req required" title="First name" id="txtFirstName" name="txtFirstName" value="" tabindex="2" />
             </td>
         </tr>
         <tr>
             <td class="vm-right-align">
                 <label for="txtLastName"><%=Resources.Chinook.Form.Labels.lblLastName%></label>
             </td>
             <td>
                 <input type="text" class="text txtName" title="Last Name" id="txtLastName" tabindex="3" />
             </td>
         </tr>    
         <tr>
             <td class="vm-right-align">
                 <label for="txtDateOfBirth"><%=Resources.Chinook.Form.Labels.lblDateOfBirth%></label>
             </td>
             <td class="">
                 <input type="text" class="text date req tooltip required" title="Enter your date of birth as dd/mm/yyyy format" id="txtDateOfBirth" name="txtDateOfBirth" tabindex="4"/>
             </td>
         </tr>        
      
     </table>     
			</ul>
		</li>
		<li style="position: static;">
			<a href="#">Programming Languages</a>
			<ul style="display: none;">
			<table>
			   <tr>
             <td class="vm-right-align">
                 <label for="txtAddressLine1"><%=Resources.Chinook.Form.Labels.lblAddressLine1%></label>
             </td>
             <td>
                 <input type="text" class="text txtAddress req required" title="" id="txtAddressLine1" name="txtAddressLine1"  tabindex="5" />
             </td>
         </tr>
         <tr>
             <td class="vm-right-align">
                 <label for="txtAddressLine2"><%=Resources.Chinook.Form.Labels.lblAddressLine2%></label>
             </td>
             <td>
                 <input type="text" class="text txtAddress" title="" id="txtAddressLine2" tabindex="6" />
             </td>
         </tr>
         <tr>
             <td class="vm-right-align">
                 <label for="txtCity"><%=Resources.Chinook.Form.Labels.lblCity%></label>
             </td>
             <td>
                 <input type="text" class="text txtCity req required" title="" id="txtCity" name="txtCity"  tabindex="7" />
             </td>
         </tr>
         <tr>
             <td class="vm-right-align">
                 <label for="txtState"><%=Resources.Chinook.Form.Labels.lblState%></label>
             </td>
             <td>
                 <input type="text" class="text txtSalute req tooltip required" title="Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tag's title attribute." id="txtState" name="txtState" tabindex="8" />
             </td>
         </tr>
         <tr>
             <td class="vm-right-align">
                 <label for="txtPostalCode"><%=Resources.Chinook.Form.Labels.lblPostalCode%></label>
             </td>
             <td>
                 <input type="text" class="text txtPostalCode req tooltip required" title="Lorum ipsum lorum ipsum, lorum ipsum" id="txtPostalCode" name="txtPostalCode" tabindex="9" />
             </td>
         </tr>
         <tr>
             <td class="vm-right-align">
                 <label for="cboCountry"><%=Resources.Chinook.Form.Labels.lblCountry%></label>
             </td>
             <td>
                 <select name="cboCountry" id="cboCountry" class="req required">
                 <option value>-Select-</option>
                 <option value="India">India</option>
                 </select>
             </td>
         </tr>      
			</table>
			</ul>
		</li>	
	</ul> 

<p><b>Template HTML Code to generate accordian menu</b></p>
<xmp>
<ul class="menu noaccordion" id="Ul2">
        <li style="position: static;">
	        <a href="#">Step-01</a>
	        <ul style="display: none;">
	           Hello Step-01			
	        </ul>
        </li>
        <li style="position: static;">
	        <a href="#">Step-02</a>
	        <ul style="display: none;">
	        Hello Step-02
	        </ul>
        </li>
        <li style="position: static;">
	        <a href="#">Step-03</a>
	        <ul style="display: none;">
	        </ul>
        </li>	
        <li style="position: static;">
	        <a href="#">Step-04</a>
	        <ul style="display: none;">
	        </ul>
        </li>	
    </ul>
</xmp>

<p><b>Script to generate accordian menu</b></p>
<pre>$(document).ready($("document.body").MakeAccordian())</pre>

<ul class="menu noaccordion" id="Ul1">
        <li style="position: static;">
	        <a href="#">Step-01</a>
	        <ul style="display: none;">
	           Hello Step-01			
	        </ul>
        </li>
        <li style="position: static;">
	        <a href="#">Step-02</a>
	        <ul style="display: none;">
	        Hello Step-02
	        </ul>
        </li>
        <li style="position: static;">
	        <a href="#">Step-03</a>
	        <ul style="display: none;">
	        </ul>
        </li>	
        <li style="position: static;">
	        <a href="#">Step-04</a>
	        <ul style="display: none;">
	        </ul>
        </li>	
    </ul>

  
    <script type="text/javascript" language="javascript">

    $(document).ready($("document.body").MakeAccordian())

    </script>
</asp:Content>
